// 导入：类型、接口、模块、组件、样式
import { Component } from "react";
import _ from "lodash";

interface PropsSon1 {
  num: number;
  [k: string]: any; // 后续讲     大致所有属性键都是字符串  值任意任性
}
class Son1 extends Component<PropsSon1> {
  // class Son1 extends PureComponent<PropsSon1> {
  shouldComponentUpdate(
    nextProps: Readonly<any>,
    nextState: Readonly<any>,
    nextContext: any
  ): boolean {
    // return false;
    // 4.1 继承PureComponent
    // 4.2 自己写循环挨个值判断
    // 4.3 使用JSON对象提供的方法
    // 4.4 使用第三方库 lodash
    // 手册：https://www.lodashjs.com/docs/lodash.isEqual#_isequalvalue-other
    //     原理：https://www.jianshu.com/p/3644833bca33
    //     留心：该方法其实就是手写，只不过是别人封装好的咱们直接用
    // 注：还有很多涉及高逼格数据先不说
    // this.props   所有的属性（旧的）
    // nextProps   所有的属性（新的）
    // let isRender = false; // 假设不用渲染
    // for (let key in this.props) {
    //   // if (旧的属性 !== 新的数据 代表要渲染) {
    //   if (this.props[key] !== nextProps[key]) {
    //     isRender = true;
    //   }
    // }
    // return isRender;
    // return JSON.stringify(this.props) !== JSON.stringify(nextProps);

    return !_.isEqual(this.props, nextProps); // 相当返回true  !渲染，  不相等返回false  !不渲染
  }

  render() {
    console.log("son1"); // 10个异步请求
    return (
      <fieldset>
        <legend>Son1</legend>
        <h1>{this.props.num}</h1>
      </fieldset>
    );
  }
}

interface Props {}
interface State {}
class Index extends Component<Props, State> {
  state = {
    num: 0,
    num2: 0,
  };
  render() {
    return (
      <fieldset>
        <legend>22-生命周期：性能优化</legend>

        <h1>num {this.state.num}</h1>
        <button onClick={() => this.setState({ num: this.state.num + 1 })}>
          num +1
        </button>
        <h1>num2 {this.state.num2}</h1>
        <button onClick={() => this.setState({ num2: this.state.num2 + 1 })}>
          num2 +1
        </button>

        <Son1 num={this.state.num} />
      </fieldset>
    );
  }
}
export default Index;
